<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>图片缩放</title>
    <link rel="stylesheet" href="scale.css" type="text/css" />
    <style>
        .list li img{
            width: 100px;

        }
    </style>
</head>

<body>
    <div class="list">
         <ul>
             <li>
                <img src="http://www.kzo.cc/uploads/181012/dcac2063ba222125dea4fa3194cb7a9e.png" />
             </li>
         </ul>
         <ul>
            <li>
               <img src="http://www.kzo.cc/uploads/180511/6324039bfad4c34404b3ad43425cd58e.png" />
            </li>
        </ul>
        <ul>
            <li>
               <img src="http://www.kzo.cc/uploads/180511/4ea80697f77c146f51b1826e0932ee56.png" />
            </li>
        </ul>
        <ul>
            <li>
               <img src="http://www.kzo.cc/uploads/180517/97303eda4286033b1f0409e7d30b6f1c.png" />
            </li>
        </ul>
        <ul>
            <li>
               <img src="http://www.kzo.cc/uploads/180619/1bb0a1533a1df393aa15170ae985c94b.png" />
            </li>
        </ul>
        <ul>
            <li>
               <img src="http://www.kzo.cc/uploads/181012/dcac2063ba222125dea4fa3194cb7a9e.png" />
            </li>
        </ul>
    </div>
    <section class="imgzoom_pack">
        <div class="imgzoom_x">X</div>
        <div class="imgzoom_img"><img src="" /></div>
    </section>
    <script src="scale.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function(event){
            ImagesZoom.init({
                "elem": ".list"
            });
        }, false);
    </script>
</body>
</html>
